<template>
  <a-modal :visible="visible" width="50%" @cancel="cancel" @ok="cancel">
    <template #title> 流程详情 </template>
    <div class="content">
      <div class="nodes-display"> </div>
      <a-divider></a-divider>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { defineEmits, defineProps, watch } from 'vue';
  // import { Message } from '@arco-design/web-vue';

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
  });
  const emits = defineEmits(['update:visible']);
  const cancel = () => {
    emits('update:visible', false);
  };

  const init = () => {};
  watch(
    () => props.visible,
    (val) => {
      if (val) {
        init();
      }
    }
  );
</script>

<style scoped lang="less">
  .nodes-display {
    min-height: 100px;
    //border: 1px solid red;
    padding-left: 50px;
    padding-right: 50px;
    .flexEnd {
      justify-content: flex-end !important;
    }
    .node-row {
      padding-top: 8px;
      //padding-bottom: 8px;
      margin-top: 8px;
      //border-top: 1px solid var(--color-border-2);
      height: 40px;
      position: relative;
      &:first-child {
        border-top: 0;
      }
    }
    .node-item {
      display: flex;
      justify-content: left;
      align-items: center;
      align-content: center;
      position: relative;
      //border: 1px solid black;

      .node-num {
        height: 28px;
        width: 28px;
        border-radius: 14px;
        background-color: var(--color-fill-2);
        text-align: center;
        line-height: 28px;
      }
      .node-name {
        margin-left: 8px;
        max-width: calc(100% - 70px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: 8px;
      }
      .line {
        height: 0;
        border-bottom: 1px solid var(--color-border-2);
        //width: 60px;
        flex: 1;
      }
    }
    .link-left {
      height: 48px;
      width: 40px;
      position: absolute;
      top: 14px;
      left: -44px;
      border: 1px solid var(--color-border-2);
      border-right: 0;
    }
    .link-right {
      height: 48px;
      width: 2px;
      position: absolute;
      top: 14px;
      right: 0;
      border: 1px solid var(--color-border-2);
      border-left: 0;
    }
    .start-node {
      .node-num {
        background-color: rgb(var(--arcoblue-6));
        color: white;
      }
    }
  }
  .title {
    position: relative;
    .text {
      display: flex;
      align-content: center;
      align-items: center;
    }
    .text-font {
      display: inline-block;
      font-size: 14px;
      font-weight: 600;
      margin-left: 8px;
    }
    .file-count {
      position: absolute;
      top: 0;
      right: 0;
    }
  }
</style>
